<template>
  <el-card class="box-card card-header m-t-20">
    <div slot="header" class="clearfix f-medium">
      <i class="fa fa-map m-r-10 text-c-blue" aria-hidden="true"></i>
      <span>电子地图</span>
    </div>
    <div class="map-view">
      <ZMap ref="zmap" :initConfig="initConfig">
        <template #footer="{ clear, fit }">
          <div class="text-center m-t-10">
            <el-button @click="clear('note')" size="mini" type="primary">清空标记</el-button>
            <el-button @click="fit" size="mini" type="info">视角恢复</el-button>
          </div>
        </template>
      </ZMap>
    </div>
  </el-card>
</template>

<script>
// 引入地图加载器
import { initConfig } from '../config/map-config'
export default {
  name: "EMap",
  data() {
    return {
      initConfig,
    };
  },
  mounted() {
    this.$bus.$on("toAddMarker", this.addMarker);
  },
  beforeDestroy() {
    this.$bus.$off("toAddMarker");
  },
  methods: {
    // 对map组件的操作:传入要调用的函数名+参数
    op_map(fn, ...query) {
      return this.$refs.zmap[fn](...query)
    },
    // 添加标记点
    addMarker(data) {
      let { op_map } = this;
      let MarkerIndex = data.index + 1;
      let lnglat = [data.pos[0], data.pos[1]];
      // 如果已经标记，则取消上一个标记
      const allMarkers = op_map('getA_Type', "marker");
      let indexItem = allMarkers.filter(
        (item) => item.getExtData().id == MarkerIndex
      );
      if (indexItem.length) indexItem[0].setMap(null);
      op_map('addMarker', [{
        options: {
          position: lnglat,
          extData: {
            id: MarkerIndex,
          },
        },
        showInfo: true,
        icon: 'blue',
        content: `第${MarkerIndex}张图拍摄坐标为${lnglat}`
      }])
      op_map('fitView');
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .amap-marker,
/deep/ .amap-icon,
/deep/ .amap-icon img {
  width: 32px !important;
  height: 32px !important;
}

.map-view {
  height: 500px;
}

.card-header {
  /deep/ .el-card__header {
    border-left: 5px solid var(--blue);
  }
}
</style>